<template>
	<view>
		<text>横向滑块视图容器</text>
	</view>
	<swiper indicator-dots circular indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#007aff" autoplay interval="3000" duration="1000">
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
	</swiper>
	<view>
		<text>纵向向滑块视图容器</text>
	</view>
	<swiper indicator-dots vertical circular indicator-color="rgba(0,0,0,0.3)" indicator-active-color="#007aff" autoplay interval="3000" duration="1000">
		//vertical 滑动方向是否为纵向 
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
		<swiper-item>
			<view class="swiper-item"></view>
		</swiper-item>
	</swiper>
</template>

<script setup>

</script>

<style lang="less">
swiper {
	width: 100vm;
	height: 500px;
	border: 1px solid red;
	swiper-item {
		width: 100%;
		height: 100%;
		background-color: orange;
	}
	swiper-item:nth-child(2n) {
		background-color: pink;
	}
}
</style>
